<template>
	<view class="nav-bar">
		<view :style="{height:statusBarHeight+'px'}"></view>
		<uni-nav-bar title="工作台" background-color="#3274F9" color="#fff" :border="false" fixed="true"></uni-nav-bar>
	</view>
	<view class="shop-info" :style="{marginTop:statusBarHeight+44+'px'}">
		<view class="flex-row">
			<view class="flex-row justify-center items-center shop-title">
				<image src="/static/default_avator.png" style="border-radius: 50%; width: 120rpx;height: 120rpx;"></image>
				<view class="flex-col">
					<text>测试店铺</text>
					<text style="font-size: 25rpx;margin-top: 10rpx;">进店 ></text>
				</view>
			</view>
		</view>
		<!--订单 收入-->
		<view class="flex-row justify-around" style="margin-top: 30rpx;margin-bottom: 80rpx;">
			<view class="flex-col items-center">
				<view class="flex-col items-center" style="gap: 15rpx;">
					<text class="text-big">9992.03</text>
					<text class="text-small">今日收入(元)</text>
				</view>
				<view class="flex-col items-center" style="margin-top: 35rpx;gap: 15rpx;">
					<text class="text-big">89</text>
					<text class="text-small">今日活跃用户</text>
				</view>
			</view>
			<view class="flex-col items-center">
				<view class="flex-col items-center" style="gap: 15rpx;">
					<text class="text-big">200</text>
					<text class="text-small">今日订单数</text>
				</view>
				<view class="flex-col items-center" style="margin-top: 35rpx;gap: 15rpx;">
					<text class="text-big">15</text>
					<text class="text-small">今日新增用户</text>
				</view>
			</view>
			<view class="flex-col items-center">
				<view class="flex-col items-center" style="gap: 15rpx;">
					<text class="text-big">19992.03</text>
					<text class="text-small">累计收入(元)</text>
				</view>
				<view class="flex-col items-center" style="margin-top: 35rpx;gap: 15rpx;">
					<text class="text-big">2365</text>
					<text class="text-small">累计用户</text>
				</view>
			</view>
		</view>
	</view>
	<view class="notice-bg">
		<text style="color: #333333;font-size: 35rpx;">待办事项</text>
		<view class="flex-row justify-between items-center" style="margin-top: 30rpx;">
			<view class="flex-row items-center">
				<view class="tips">提醒</view>
				<text style="color: #666666;margin-left: 10rpx;">有6个订单需要备货</text>
			</view>
			<uni-icons type="right" size="20"></uni-icons>

		</view>
		<view class="flex-row justify-between items-center" style="margin-top: 20rpx;">
			<view class="flex-row items-center">
				<view class="tips">提醒</view>
				<text style="color: #666666;margin-left: 10rpx;">有4个订单申请售后</text>
			</view>
			<uni-icons type="right" size="20"></uni-icons>
		
		</view>
	</view>
	<view class="data-panel">
		<text style="color: #333333;font-size: 35rpx;">数据看板</text>
		<view class="flex-row justify-around" style="margin-top: 30rpx;">
			<view class="flex-col items-center">
				<text>9</text>
				<text class="data-text">待支付</text>
			</view>
			<view class="flex-col items-center">
				<text>25</text>
				<text class="data-text">待发货</text>
			</view>
			<view class="flex-col items-center">
				<text>30</text>
				<text class="data-text">已发货</text>
			</view>
			<view class="flex-col items-center">
				<text>5</text>
				<text class="data-text">待售后</text>
			</view>
		</view>
		<view class="flex-row justify-around" style="margin-top: 30rpx;">
			<view class="flex-col items-center">
				<text>20</text>
				<text class="data-text">出售中</text>
			</view>
			<view class="flex-col items-center">
				<text>999</text>
				<text class="data-text">已完成</text>
			</view>
			<view class="flex-col items-center">
				<text>10</text>
				<text class="data-text">已取消</text>
			</view>
			<view class="flex-col items-center">
				<text>9</text>
				<text class="data-text">已退款</text>
			</view>
		</view>
	</view>
	
	<view class="service-panel">
		<view class="flex-row justify-around">
			<view class="flex-col items-center" @click="goShopData(0)">
				<image src="/static/service_1.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">发布商品</text>
			</view>
			<view class="flex-col items-center" @click="goShopData(1)">
				<image src="/static/service_2.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">商品管理</text>
			</view>
			<view class="flex-col items-center" @click="goShopData(2)">
				<image src="/static/service_3.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">订单管理</text>
			</view>
			<view class="flex-col items-center" @click="goShopData(3)">
				<image src="/static/service_4.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">售后订单</text>
			</view>
		</view>
		<view class="flex-row" style="flex-wrap: wrap;margin-top: 40rpx;">
			<view class="flex-col items-center item-tip" @click="goShopData(4)">
				<image src="/static/service_5.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">经营数据</text>
			</view>
			<view class="flex-col items-center item-tip" @click="goShopData(5)">
				<image src="/static/service_6.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">资产管理</text>
			</view>
			<view class="flex-col items-center item-tip" @click="goShopData(6)">
				<image src="/static/service_7.png" style="width: 60rpx;height: 60rpx;"></image>
				<text class="service-text">用户管理</text>
			</view>
		</view>
	</view>
	<view style="height: 10rpx;"></view>
	<tab-bar :current-page='0'></tab-bar>
</template>

<script>
	import { useUserStore } from '../../store/userStore';
	export default {
		data() {
			return {
				
			}
		},
		onLoad() {
			
		},
		computed:{
			statusBarHeight(){
				return useUserStore().statusBarHeight
			}
		},
		methods: {
			///经营数据
			goShopData(index){
				switch(index){
					case 0:
						uni.navigateTo({
							url:'/pages/add_goods/add_goods'
						})
					break
					case 1:
						uni.navigateTo({
							url:'/pages/goods/goods'
						})
					break
					case 2:
						uni.navigateTo({
							url:'/pages/order/order'
						})
					break
					case 3:
						uni.navigateTo({
							url: '/pages/after_order/after_order'
						})
					break
					case 4:
						uni.navigateTo({
							url:'/pages/shop_data/shop_data'
						})
					break
					case 5:
						uni.navigateTo({
							url:'/pages/wallet/wallet'
						})
					break
					case 6:
						uni.navigateTo({
							url:'/pages/user_manage/user_manage'
						})
					break
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.shop-info{
	display: flex;
	flex-direction: column;
	background-color: #3274F9;
	border-bottom-left-radius: 35rpx;
	border-bottom-right-radius: 35rpx;
	padding: 15rpx;
	color: #fff;
}
.shop-title{
	// margin: 30rpx;
	margin: 25rpx 35rpx;
}
.shop-title text{
	font-size: 35rpx;
	margin-left: 30rpx;
}
.text-small{
	font-size: 28rpx;
}
.text-big{
	font-size: 45rpx;
}
.notice-bg{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 25rpx;
	margin-top: -50rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
}
.data-panel{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 25rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
}
.service-panel{
	background-color: #fff;
	border-radius: 20rpx;
	padding: 25rpx;
	margin-left: 20rpx;
	margin-right: 20rpx;
	display: flex;
	flex-direction: column;
	margin-top: 20rpx;
	margin-bottom: 200rpx;
}
.item-tip{
	flex: 0 0 25%;
}
.tips{
	border: 1rpx solid #FF8C1A;
	color: #FF8C1A;
	padding-left: 6rpx;
	padding-right: 6rpx;
}
.data-text{
	color: #999999;
	margin-top: 20rpx;
}
.service-text{
	color: #333333;
	margin-top: 20rpx;
}
</style>
